<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->


<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Org Vault</title>
<!--     
    In production it is better to get these from google, and to get the minimized versions.
    In development it is nice to use the local versions so that you can code with no
    internet connection.
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
-->
    <script src="/js-ext/jquery-1.6.2.js"></script>
    <script src="/js-ext/beta1-jquery.tmpl.js"></script>
    <script src="/js/class/AjaxHelper.js"></script>
    
  </head>

  <body>
  
  
<script id="messages_template_id" type="text/x-jquery-tmpl">
       {{each messages}}
           <p>${$value}</p>
       {{/each}}
</script>

  <script type="text/javascript">
  $(function(){
     // this function is executed upon document ready
     // it assigns various click handlers, then initiates the AJAX call to get the kinds
      console.log("ready!");   
     
  })
  function loadSampleData(){
    console.log("about to loadSampleData");
    
      $("#messages_container_id").empty();
      var options = {
          'success': function (data) {  
              console.log("success");
              $( "#messages_template_id" ).tmpl(data).appendTo( "#messages_container_id" );
          }
      };
      new AjaxHelper(options).getJSON("/loadSampleData.app", options);
  }
  function getOrgsForTest(){
      console.log("getOrgsForTest");
      console.log("ajax call to get orgs for logging");
      var options = {
          'success': function (msg) {  
              console.log("getOrgs for test... success");
              $.each(msg.orgs, function(index, value) { 
                  console.log('orgs...' + index + ': ' + value); 
                  console.log('orgs...stringify: ' + JSON.stringify(value)); 
                });
          }
      };
      new AjaxHelper(options).getJSON("/orgGetList.app", options);
  }
  
  function getUsersForTest(){
      console.log("getUsersForTest");
      console.log("ajax call to get users for logging");
      var options = {
          'success': function (msg) {  
              console.log("getUsers for test... success");
              $.each(msg.persons, function(index, value) { 
                  console.log('persons...' + index + ': ' + value); 
                  console.log('person...stringify: ' + JSON.stringify(value)); 
                });
          }
      };
      new AjaxHelper(options).getJSON("/personGetList.app", options);
  }
  
  </script>
  
  <h1><img style="border: none;"src="/image/safe.png" alt="The Org Vault" height="64" width="64"/>Org Vault Load Sample Data</h1>
  
  <p>
    <button type="button" id="button" class="fap_json_action_initiator" onclick="loadSampleData()">Load sample data</button>
  </p>
  <p>
    <button type="button" id="button" class="fap_json_action_initiator" onclick="getUsersForTest()">Get users for test</button>
  </p>
  <p>
    <button type="button" id="button" class="fap_json_action_initiator" onclick="getOrgsForTest()">Get orgs for test</button>
  </p>
  <p><a href="/index.html">Welcome</a></p>
  <p><a href="/home.html">Org Vault Home</a></p>
  <div id="messages_container_id"></div>
  </body>
</html>
